import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:gold/route/xfg_nav.dart';
import 'package:gold/ui/home/rank/rank_content_viewmodel.dart';
import 'package:gold/utils/res.dart';
import 'package:gold/utils/xfg_color.dart';
import 'package:gold/utils/xfg_size.dart';
import 'package:gold/widgets/xfg_text.dart';

import 'rank_content_page.dart';

/// @description:
/// @author tangzhentao
/// @created at 21:04 2024/12/1


class RankPage extends StatelessWidget {
  /// 标签数据
  final tabs= [PoolType.day, PoolType.week, PoolType.month, PoolType.year];
  /// 日周月年
  late final ValueNotifier<PoolType> _tabNotifier;
  /// 控制器
  late final PageController _controller;

  RankPage({super.key}) {
    _tabNotifier = ValueNotifier(tabs[0]);
    _controller = PageController();
  }

  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion(
      value: SystemUiOverlayStyle.light,
      child: Container(
        decoration: const BoxDecoration(color: XfgColor.background, image: DecorationImage(image: AssetImage(Res.imagesRankTopBg), fit: BoxFit.fitWidth, alignment: Alignment.topCenter)),
        child: Scaffold(
          backgroundColor: XfgColor.transparent,
          extendBody: true,
          body: Column(
            children: [
              Container(
                margin: EdgeInsets.only(top: XfgSize().statusBarHeight),
                height: kToolbarHeight,
                child: Row(
                  children: [
                    InkWell(
                      onTap: XfgNav.pop,
                      child: Container(
                        height: kToolbarHeight,
                        width: XfgSize().size48,
                        alignment: Alignment.center,
                        child: Icon(Icons.arrow_back_ios_new_rounded, size: XfgSize().size16, color: XfgColor.white),
                      ),
                    ),
                    Expanded(
                      child: ValueListenableBuilder<PoolType>(
                        valueListenable: _tabNotifier,
                        builder: (_, select, __) {
                          return Row(mainAxisAlignment: MainAxisAlignment.center, children: tabs.map((type) {
                            final index = tabs.indexOf(type);
                            return InkWell(
                              onTap: () {
                                _tabNotifier.value = type;
                                _controller.jumpToPage(index);
                              },
                              borderRadius: BorderRadius.circular(XfgSize().size48),
                              child: SizedBox(
                                width: XfgSize().size48,
                                child: Column(
                                  mainAxisSize: MainAxisSize.max,
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: [
                                    XfgText(type.name, fontSize: XfgSize().text16, color: XfgColor.white),
                                    SizedBox(height: XfgSize().size6),
                                    Container(height: XfgSize().size2, width: XfgSize().size16, decoration: BoxDecoration(color: select == type ? XfgColor.white:XfgColor.transparent, borderRadius: BorderRadius.circular(XfgSize().size2)))
                                  ],
                                ),
                              ),
                            );
                          }).toList());
                        },
                      ),
                    ),
                    SizedBox(width: XfgSize().size48)
                  ],
                ),
              ),
              Expanded(
                child: PageView(
                  controller: _controller,
                  onPageChanged: (index) => _tabNotifier.value = tabs[index],
                  children: [
                    RankContentPage(poolType: tabs[0]),
                    RankContentPage(poolType: tabs[1]),
                    RankContentPage(poolType: tabs[2]),
                    RankContentPage(poolType: tabs[3]),
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}